<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-16 16:16:29
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-25 14:21:44
 * @Description: 
-->
<template>
  <el-backtop
    target="#content"
    style="z-index: 99999"
    :right="100"
    :bottom="100"
    :visibility-height="0"
  />

  <div class="content" id="content" ref="contentRef">
    <el-card shadow="hover" v-if="res.status">
      <template #header>
        <h1 class="header">{{ articleDetail.title }}</h1>
        <p class="time">
          <el-icon><Calendar /></el-icon>
          {{ articleDetail.create_time }}
        </p>
      </template>
      <el-image class="main_photo" :src="articleDetail.main_photo" />
      <div v-html="articleDetail.content" class="text-content"></div>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0"
          ><el-button
            round
            type="success"
            icon="edit"
            style="width: 100%"
            size="large"
            class="btn-font"
            @click="handleEdit"
            >编辑</el-button
          ></el-col
        >
        <el-col :span="12" :offset="0"
          ><el-button
            round
            type="danger"
            icon="delete"
            style="width: 100%"
            size="large"
            class="btn-font"
            >删除</el-button
          ></el-col
        >
      </el-row>
    </el-card>

    <br />

    <el-card class="comment-box">
      <h2>用户评论</h2>
      <ul>
        <li class="comment" v-for="item in commentList" :key="item.id">
          <el-avatar>{{ item.user_nickname }}</el-avatar>
          <div class="text">
            <div class="name">
              <span>
                {{ item.user_nickname }}
              </span>
              <span class="time">{{ item.create_time }}</span>
            </div>
            <p class="comment-content">{{ item.content }}</p>
            <p>
              <el-button link icon="Pointer" class="">点赞</el-button>
              <el-button
                @click.stop="isReplyShow = item.id"
                link
                icon="ChatDotSquare"
                class="reply-link"
                >回复</el-button
              >
            </p>
            <div v-if="isReplyShow === item.id" class="reply-box">
              <el-input
                v-model="replyContent"
                :placeholder="`回复 ${item.user_nickname} :`"
                type="textarea"
                :autosize="{ minRows: 2 }"
                :rows="1"
                :resize="false"
                input-style="font-size:16px"
              />
              <p style="text-align: right; margin-top: 10px">
                <el-button
                  type="primary"
                  @click="handleReply(item.id)"
                  :disabled="replyContent === ''"
                  >回复评论</el-button
                >
              </p>
            </div>
            <div class="reply-main comment" v-if="item.reply">
              <el-avatar>admin</el-avatar>
              <div class="text">
                <div class="name">
                  <span>管理员</span>
                  <span class="time">{{ item.reply_date }}</span>
                </div>
                <div class="comment-content">
                  {{ item.reply }}
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </el-card>

    <NotFound v-if="!res.status" />
  </div>

  <div class="fixed-box">
    <el-tooltip class="box-item" effect="dark" content="返回" placement="left">
      <el-button
        @click="router.go(-1)"
        type="warning"
        circle
        icon="Back"
        size="large"
      ></el-button>
    </el-tooltip>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="编辑此文章"
      placement="left"
    >
      <el-button
        @click="handleEdit"
        type="success"
        circle
        icon="edit"
        size="large"
      ></el-button>
    </el-tooltip>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="删除此文章"
      placement="left"
    >
      <el-button
        @click="handleRemove"
        type="danger"
        circle
        icon="delete"
        size="large"
      ></el-button>
    </el-tooltip>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="返回顶部"
      placement="left"
    >
      <el-button
        @click="backTop"
        type="primary"
        circle
        icon="Top"
        size="large"
      ></el-button>
    </el-tooltip>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { article, comment } from "@/api";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import NotFound from "@/components/error/404error.vue";

const store = useStore();
const route = useRoute();
const router = useRouter();

const commentContent = ref("");

const id = route.query.id;

// 评论列表
const commentList = ref((await comment.list({ id })).data);
console.log(commentList.value);

// 文章详情
const res = await article.detail({ id });
const articleDetail = res.data;

const contentRef = ref(null);

// 404
if (!res.status) {
  ElMessage.error("暂无内容");
}

/**
 * @description: 跳转编辑页面
 * @return {*}
 */
const handleEdit = () => {
  router.push({ path: "/article/edit", query: { id } });
};

/**
 * @description: 删除文章
 * @return {*}
 */
const handleRemove = async () => {
  let { status, msg, data } = await article.remove({ id });
  if (status) {
    ElMessage.success("删除成功");
    router.go(-1);
  } else {
    ElMessage.error("删除失败");
  }
};

/**
 * @description: 返回顶部
 * @return {*}
 */
const backTop = () => {
  contentRef.value.parentElement.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

const replyContent = ref("");
const isReplyShow = ref(0);
const handleReply = async (id) => {
  let { status, msg, data } = await comment.reply({
    id,
    reply: replyContent.value,
  });

  if (status) {
    commentList.value = (await comment.list({ id: route.query.id })).data;
  }
  ElMessage({
    type: status ? "success" : "error",
    message: msg,
  });

  replyContent.value = "";
  isReplyShow.value = 0;
};
</script>

<style  scoped>
.content {
  width: 65%;
  margin: 0 auto;
  transition: width 0.3s linear;
}
@media only screen and (max-width: 768px) {
  .content {
    width: 100%;
  }
}
.header {
  font-size: 40px;
}
.main_photo {
  width: 100%;
}
.time {
  color: var(--el-color-info);
}

.text-content {
  font-family: "Courier New", Courier, monospace;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
}
.text-content >>> p {
  margin: 20px 0 !important;
  line-height: 40px !important;
}
.text-content >>> h1,
.text-content >>> h2,
.text-content >>> h3,
.text-content >>> h4,
.text-content >>> h5,
.text-content >>> h6 {
  margin: 30px 0 10px 0;
  font-weight: 900;
}

.fixed-box {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fixed-box .el-button {
  margin-left: 0;
}
.fixed-box .box-item {
  width: 110px;
  margin-top: 10px;
}
.comment-box h2 {
  margin-bottom: 20px;
}
.comment {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px var(--el-color-info-light-7) dashed;
}
.comment .name {
  /* line-height: 40px; */
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.comment .text {
  flex: 1;
}
.comment .time {
  color: var(--el-color-info);
  margin-left: 20px;
}
.comment .comment-content {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--el-text-color-regular);
  margin-bottom: 5px;
}
.comment .reply-box {
  margin-top: 10px;
  overflow: hidden;
}

.comment .reply-main {
  border-bottom: none;
  height: auto;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 5px;
  background: var(--el-color-primary-light-9);
}
</style>

